<template>
  <div>
    <el-form :model="queryForm" inline>
      <el-form-item label="客户名称">
        <el-input v-model="queryForm.customerName" placeholder="请输入客户名称"></el-input>
      </el-form-item>
      <el-form-item label="创建人">
        <el-input v-model="queryForm.createMan" placeholder="请输入创建人"></el-input>
      </el-form-item>
      <el-form-item label="分配状态">
        <el-select v-model="queryForm.state" placeholder="请选择分配状态" clearable style="width: 240px">
          <el-option label="未分配" value="0"/>
          <el-option label="已分配" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item label="查询范围">
        <el-select v-model="queryForm.curr" placeholder="请选择查询范围" clearable style="width: 240px">
          <el-option label="查看全部" value="0"/>
          <el-option label="只看我的" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch()">查询</el-button>
        <el-button type="primary" @click="handleAdd()">添加</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%;height:520px"
    :cell-style="{'text-align':'center'}"
    :header-cell-style="{'text-align':'center'}">
      <el-table-column label="序号">
        <template #default="scope">
          {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="机会编号"></el-table-column>
      <el-table-column prop="chanceSource" label="机会来源"></el-table-column>
      <el-table-column prop="customerName" label="客户名称"></el-table-column>
      <el-table-column prop="cgjl" label="成功几率"></el-table-column>
      <el-table-column prop="overview" label="概要"></el-table-column>
      <el-table-column prop="linkMan" label="联系人"></el-table-column>
      <el-table-column prop="linkPhone" label="联系号码"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column prop="createMan" label="创建人"></el-table-column>
      <el-table-column prop="assignMan" label="分配人"></el-table-column>
      <el-table-column prop="assignTime" label="分配时间"></el-table-column>    
      <el-table-column prop="state" label="分配状态"></el-table-column>
      <el-table-column prop="devResult" label="开发结果"></el-table-column>
      <el-table-column prop="isValid" label="有效状态"></el-table-column>
      <el-table-column prop="createDate" label="创建时间"></el-table-column>
      <el-table-column prop="updateDate" label="修改时间"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button type="info" size="small" @click="handleEdit(scope.row)">
            <el-icon>
              <Edit/>
            </el-icon>
          </el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">
            <el-icon>
              <Delete/>
            </el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>

    <!-- 模态框 -->
    <el-row>
      <template v-if="modelForm.dialogFormVisible">
        <el-dialog :title="modelForm.title" v-model="modelForm.dialogFormVisible" width="30%">
          <el-form :model="modelData" :rules="rules" label-position="left" label-width="auto">
            <el-form-item label="机会来源:">
              <el-input v-model="modelData.chanceSource" placeholder=请输入机会来源></el-input>
            </el-form-item>
            <el-form-item label="客户名称:">
              <el-input v-model.number="modelData.customerName" placeholder="请输入客户名称"></el-input>
            </el-form-item>
            <el-form-item label="成功几率:">
              <el-input v-model="modelData.cgjl" placeholder="请输入成功几率"></el-input>
            </el-form-item>
            <el-form-item label="概要:">
              <el-input v-model="modelData.overview" placeholder="请输入概要"></el-input>
            </el-form-item>
            <el-form-item label="联系人:">
              <el-input v-model="modelData.linkman" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="联系号码:">
              <el-input v-model="modelData.linkPhone" placeholder="请输入联系号码"></el-input>
            </el-form-item>
            <el-form-item label="描述:">
              <el-input v-model="modelData.description" placeholder="请输入描述"></el-input>
            </el-form-item>
            <el-form-item label="创建人:">
              <el-input v-model="modelData.createMan" placeholder="请输入创建人"></el-input>
            </el-form-item>
            <el-form-item label="分配人:">
              <el-input v-model="modelData.assignMan" placeholder="请输入分配人"></el-input>
            </el-form-item>
            <el-form-item label="分配时间:">
              <el-input v-model="modelData.assignTime" placeholder="请输入分配时间"></el-input>
            </el-form-item>
            <el-form-item label="分配状态:">
              <el-input v-model="modelData.state" placeholder="请输入分配状态"></el-input>
            </el-form-item>
            <el-form-item label="开发结果:">
              <el-input v-model="modelData.devResult" placeholder="请输入开发结果"></el-input>
            </el-form-item>
            <el-form-item label="有效状态:">
                <el-input v-model="modelData.isValid" placeholder="请输入有效状态"></el-input>
            </el-form-item>
            <el-form-item label="创建时间:">
              <el-input v-model="modelData.createDate" placeholder="请输入创建时间"></el-input>
            </el-form-item>
            <el-form-item label="修改时间:">
              <el-input v-model="modelData.updateDate" placeholder="请输入修改时间"></el-input>
            </el-form-item>
          </el-form>
          <div class="dialog-footer">
            <slot name="footer">
              <el-button @click="closeModel()">取 消</el-button>
              <el-button @click="reset()">重 置</el-button>
              <el-button type="primary" @click="submit()">提 交</el-button>
            </slot>
          </div>
        </el-dialog>
      </template>    
    </el-row>
  </div>
</template>


<script setup>
import {ref, reactive, onMounted} from 'vue';
import {ElForm, ElFormItem, ElInput, ElButton, ElTable, ElTableColumn, ElPagination} from 'element-plus';
import {Edit, Delete, MagicStick} from '@element-plus/icons-vue';
import axios from "axios";

axios.defaults.headers.common['Authorization'] = `Bearer` + localStorage.getItem('token');

// 模态框信息
const modelForm = reactive({
  input: '',
  title: '',
  dialogFormVisible: false,
  data: {},
})

// 模态框数据
const modelData = reactive({
  id: '',
  chanceSource: '',
  customerName: '',
  cgjl: '',
  overview: '',
  linkman: '',
  linkPhone: '',
  description: '',
  createMan: '',
  assignMan: '',
  assignTime: '',
  state: '',
  devResult: '',
  isValid: '',
  createDate: '',
  updateDate: '',
});

// 查询表单数据
const queryForm = reactive({
  customerName: '',
  createMan: '',
  state: '',
  curr: '',
});

// 表格数据
const tableData = ref([]);

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

// 模拟获取数据的函数
const fetchData = async (queryForm) => {

  console.log("查询,参数为：{}",queryForm);
  let params = {};
  if (!queryForm.curr) {
    params = {
      customerName: queryForm.customerName,
      createMan: queryForm.createMan,
      state: queryForm.state,
      page: pagination.currentPage,
      pageSize: pagination.pageSize,
    };
  } else {
    params = {
      customerName: queryForm.customerName,
      createMan: queryForm.createMan,
      state: queryForm.state,
      curr: queryForm.curr,
      page: pagination.currentPage,
      pageSize: pagination.pageSize,
    };
  }
  const result = await axios.get("/api/saleChance/page",{params});
  console.log(result.data);
  if (result.data.code) {
    tableData.value = result.data.data.records;
    pagination.total = result.data.data.total;
  }
};

// 查询
const handleSearch = () => {
  fetchData(queryForm);
};

// 分页大小改变
const handleSizeChange = (newSize) => {
  pagination.pageSize = newSize;
  fetchData(queryForm);
};

// 当前页改变
const handleCurrentChange = (newPage) => {
  pagination.currentPage = newPage;
  console.log("当前页改变:{}", pagination.currentPage);
  fetchData(queryForm);
};

// 添加
const handleAdd = () => {
  // 实现添加逻辑
  console.log('添加');

  reset();
  modelForm.dialogFormVisible = true;
  modelForm.title = '新增数据';
};

// 编辑
const handleEdit = (row) => {
  // 实现编辑逻辑
  console.log('编辑', row);

  reset();
  modelData.assignTime = row.assignTime;
  modelData.assignMan = row.assignMan;
  modelData.cgjl = row.cgjl;
  modelData.chanceSource = row.chanceSource;
  modelData.createMan = row.createMan;
  modelData.createDate = row.createDate;
  modelData.customerName = row.customerName;
  modelData.description =row.description;
  modelData.devResult = row.devResult;
  modelData.id = row.id;
  modelData.linkPhone = row.linkPhone;
  modelData.linkman = row.linkman;
  modelData.overview = row.overview;
  modelData.state = row.state;
  modelData.updateDate = row.updateDate;
  modelData.isValid = row.isValid;
  
  modelForm.dialogFormVisible = true;
  modelForm.title = '修改数据';
};

// 删除
const handleDelete = async (row) => {
  // 实现删除逻辑
  console.log('删除', row);
  
  this.$confirm('确认删除？','系统提示',{
    confirmButtonText:'确定',
    cancelButtonText:'取消',
    cancelButtonClass:'btn-custom-cancel',
    type:'warning'
  }).then(function(){
    axios.delete('/api/saleChance/'+ row.id).then(res=>{
      if(res.data.code === '1'){
        msg("success","删除成功");
        onMounted();
      }else{
        msg("error", res.data.message);
      }
    })
  })
};

// 提交编辑信息
const submit = () => {
  modelForm.dialogFormVisible = false;

  // 提交添加结果
  if (!modelData.id) {
    console.log(modelData.id);
    axios.post('/api/saleChance/', modelData).then(res => {
      if(res.data.code === '1'){
        msg("success","添加成功");
      }else{
        msg("error", res.data.message);
      }
      modelForm.dialogFormVisible = false;
      onMounted();  
    })
  } 
  // 提交修改结果
  else {
      axios.put('/api/saleChance/', modelData).then(res => {
        if(res.data.code === '1'){
          msg("success","添加成功");
        }else{
          msg("error", res.data.message);
        }
      modelForm.dialogFormVisible = false;
      onMounted();
    })
  }
}

// 清空模态框
const reset = () => {
  modelData.assignTime = null;
  modelData.assignMan = null;
  modelData.cgjl = null;
  modelData.chanceSource = null;
  modelData.createMan = null;
  modelData.createDate = null;
  modelData.customerName = null;
  modelData.description = null;
  modelData.devResult = null;
  modelData.isValid = null;
  modelData.linkPhone = null;
  modelData.linkman = null;
  modelData.overview = null;
  modelData.state = null;
  modelData.updateDate = null;
}

// 关闭模态框
const closeModel = () => {
  modelForm.dialogFormVisible = false;
}

// 初始化数据
onMounted(() => {
  fetchData(queryForm);
});

</script>

<style scoped>
</style>